<template>
  <view>
    <!-- 1.0 商品列表 -->
    <view class="cart_list">
      <view class="cart_item" v-for="item in cartList" :key="item.goods_id">
        <view class="cart_item_left">
          <radio
            @tap="changeSelectHandle(item.goods_id)"
            color="#EB4450"
            class="cart_item_select"
            :checked="item.goods_selected"
          ></radio>
        </view>
        <view class="cart_item_right">
           <!-- @tap.stop 使用时会阻止事件冒泡 -->
          <GoodsItem :item="item">
          <view class="cart_count">
            <view
              @tap.stop="changeCount(item.goods_id, -1)"
              class="iconfont icon-jianshao"
            ></view>
            <view class="cart_count_text">{{ item.goods_count }}</view>
            <view
              @tap.stop="changeCount(item.goods_id, 1)"
              class="iconfont icon-zengjia"
            ></view>
          </view>
          </GoodsItem>
        </view>
      </view>
    </view>

    <!-- 2.0 底部固定栏 -->
    <view v-if="cartList.length" class="bottom">
      <radio
        color="#EB4450"
        class="bottom_select"
        :checked="isSelectAll"
        @tap="changeSelectAllHandle"
      />
      <text class="select_text">全选</text>
      <text class="total_text">合计：</text>
      <text class="total_price price">{{ totalPrice }}</text>
      <view class="account" @tap="goToPayHandle">结算({{ account }})</view>
    </view>

    <!-- 3.0 购物车空状态 -->
    <view v-if="cartList.length === 0" class="cart_empty">
      <image
        class="empty_image"
        mode="widthFix"
        src="@/static/cart_empty.gif"
      />
      <navigator
        url="/pages/index/main"
        open-type="switchTab"
        hover-class="none"
        class="empty_button"
        >去首页看看</navigator
      >
    </view>
  </view>
</template>

<script>
import GoodsItem from "@/components/GoodsItem/index.vue";
export default {
  components: {
    GoodsItem
  },
  data() {
    return {
      // 为了避免上来先显示空的购物车状态，我们可以让数组的初始值长度不等于 0
      cartList: [{}]
    };
  },
  // 计算总价   如果要计算出一个新的变量，用计算属性
  computed: {
    isSelectAll() {
      return this.cartList.every(item => item.goods_selected);
    },
    totalPrice() {
      let totalPrice = 0;
      //总价计算
      //    选中的商品：商品单价 * 商品数量      累加起来即可
      this.cartList.forEach(item => {
        if (item.goods_selected) {
          totalPrice += item.goods_price * item.goods_count;
        }
      });
      return totalPrice;
    },

    // 计算结算个数
    //    自己体验一下 淘宝App 和 京东 App 的计算规则
    account() {
      let account = 0;

      // 淘宝 App 的计算规则，只计算勾勾的数量
      // this.cartList.forEach((item)=>{
      //   if(item.goods_selected){
      //     account += 1;
      //   }
      // })

      // 京东 App 的计算规则，计算选中的商品总件数
      this.cartList.forEach(item => {
        if (item.goods_selected) {
          account += item.goods_count;
        }
      });
      return account;
    }
  },
  // 变量监听 - Data 的 cartList 发生变化，本地存储也同步更新
  watch: {
    cartList: {
      deep: true,
      handler: val => {
        uni.setStorageSync("cartList", val);
      }
    }
  },
  // 🧨注意：由于购物车数据会时刻发生变化，所以每次显示页面的时候都应该获取最新数据
  //         onShow 每次显示页面都会触发
  onShow() {
    this.cartList = uni.getStorageSync("cartList") || [];
  },
  methods: {
    // 改变选中状态
    changeSelectHandle(goods_id) {
      //通过findIndex 获取索引
      const index = this.cartList.findIndex(item => item.goods_id === goods_id);
      // 选中状态取反
      this.cartList[index].goods_selected = !this.cartList[index]
        .goods_selected;
    },
    changeCount(goods_id, number) {
      const index = this.cartList.findIndex(item => item.goods_id === goods_id);
      // 判断：当前点击的是否为减号，当前的数量是否为 1
      if (number === -1 && this.cartList[index].goods_count === 1) {
        uni.showModal({
          content: "是否删除当前商品？",
          // 记得修改成箭头函数
          success: res => {
            if (res.confirm) {
              this.cartList.splice(index, 1);
            }
          }
        });
      } else {
        this.cartList[index].goods_count += number;
      }
    },
    changeSelectAllHandle() {
      const bl = !this.isSelectAll;
      this.cartList.forEach(item => {
        item.goods_selected = bl;
      });
    },
    goToPayHandle(){
      if(this.account === 0){
        uni.showToast({
          title: '请选择要购买的商品',
          icon:"none",
          duration: 1000
        });
      }else{
        // 通过 API 的方式跳转页面
        uni.navigateTo({
           url: '/pages/pay/main'
        });
      }
    }
  }
};
</script>

<style lang="less">
.cart_list {
  .cart_item {
    display: flex;
    padding: 0 20rpx;
    border-bottom: 1rpx solid #ddd;
    &:last-child {
      border-bottom: none;
    }
    .cart_item_left {
      width: 78rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .cart_item_right {
      flex: 1;
      position: relative;
      .cart_count {
        display: flex;
        align-items: center;
        position: absolute;
        right: 20rpx;
        bottom: 20rpx;
        .iconfont {
          color: #666;
          font-size: 40rpx;
        }
        .icon-zengjia {
          font-size: 36rpx;
        }
        .cart_count_text {
          // 用最小宽度确保大部分情况下都是对齐的，特殊情况也能正常显示数字s
          min-width: 80rpx;
          text-align: center;
          padding: 0 5rpx;
        }
      }
    }
  }
}
.bottom {
  height: 88rpx;
  display: flex;
  align-items: center;
  padding: 0 20rpx;
  position: fixed;
  // 同时设置左右，可以拉伸出宽度
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  border-top: 1rpx solid #ddd;
  .select_text {
    font-size: 24rpx;
    color: #999;
    margin-left: 10rpx;
  }
  .total_text {
    font-size: 26rpx;
    margin-left: 20rpx;
  }
  .price {
    font-size: 36rpx;
    flex: 1;
  }
  .account {
    width: 150rpx;
    height: 52rpx;
    background-color: var(--mainColor);
    color: #fff;
    border-radius: 30rpx;
    font-size: 24rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.cart_empty {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  .empty_image {
    width: 400rpx;
  }
  .empty_button {
    margin-top: 20rpx;
    width: 200rpx;
    height: 60rpx;
    color: #fff;
    background-color: var(--mainColor);
    border-radius: 30rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24rpx;
  }
}
</style>